<template>
  <div class="home-hot">
    <div class="top">
      <span>啥都有秒杀</span>
      <p>
        <span>{{hours < 10 ? '0' + hours : hours}}</span>:
        <span>{{min < 10 ? '0' + min : min}}</span>:
        <span>{{seconds < 10 ? '0' + seconds : seconds }}</span>
      </p>
      <span>按钮</span>
    </div>
    <div class="content">
      <ul>
        <li
        v-for="item in hotList"
        :key="item.proid"
        >
          <img :src='item.img1'>
          <span>￥{{item.originprice}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang='ts'>
import {hotListApi} from '@/api/goods'
import {ref,onMounted,watch} from 'vue'
import type {MyHotItem} from '@/config/interface'
 import {Dialog} from 'vant'

const hotList = ref<MyHotItem[]>([])
onMounted( async()=>{
 const res = await hotListApi({limitNum:20})
  hotList.value = res.data

  watchHandler()
})
//倒计时逻辑
  //定义倒计时事件
  const ms = ref<number>(10000)
  //开启定时器函数
  const timer = setInterval(()=> ms.value-- ,1000)
  const hours = ref<number>(0)
  const min = ref<number>(0)
  const seconds = ref<number>(0)

  const watchHandler = ()=>{
    hours.value = Math.floor(ms.value / (60 * 60))
    min.value = Math.floor(ms.value & (60 * 60) / 60)
    seconds.value = ms.value % 60

    if(ms.value <= 0 ){
      clearInterval(timer)
      Dialog.alert({title:'秒杀',message:'秒杀已经开始'})
      }
  }
  watch(ms,watchHandler)

</script>
<style scoped lang="scss">
@import '@/styles/vaniable.scss';
  .home-hot{
    height:150px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    // background-color: #ccc;
    flex-direction: column;
    background-clip: content-box;
    > .top{
      height: 30px;
      background: url()
      no-repeat
      ;
      background-size: 100% 30px;
      display:flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;



        > p{
          margin-left: -150px;
          display: flex;
          align-items: center;
          height:30px;
          
          > span{
            background-color: $globalColor;
            border-radius: 5px;
            padding: 2px 3px;
            color: #fff;
            font-size: 12px;
            overflow: hidden;
          }
        }
    }
    > .content{
      flex:1;
      overflow: auto;
      > ul{
        display: flex;
        > li{
          height: 100%;
          width: 50px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

        > img {
          width: 45px;
          height:45px;
          display: block;
          overflow: hidden;
          padding: 0px 1px;
        }
        > span {
          color:#ee0a24;
          font-size: 12px;
          margin-top: 10px;
        }
        }

      }
    }
  }
</style>
